<template>
  <div class="div_sty">
    <el-row >
      <el-col :span="20">
        <div class="demo_sty">
          <el-scrollbar style="height: 100%" >
            <div class="return">
              <span><i class="el-icon-back"></i>   返回</span>
            </div>
            <div class="separator_sty"></div>
            <div class="form_sty">
              <el-form label-width="80px" :model="zhaoContractInfo">
                <el-row>
                  <el-col :span="8">
                    <el-form-item  label="主题" prop="name">
                      <el-input  v-model="zhaoContractInfo.contractTheme"  placeholder="优品创意公司第一次合作"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="对应客户" prop="amount">
                      <el-input  v-model="zhaoContractInfo.cusName" placeholder="优品创意公司"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="对应机会" prop="region">
                      <el-select v-model="zhaoContractInfo.businessName" placeholder="机会列表" style="width:217px">
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="8">
                    <el-form-item label="合同编号" prop="contract">
                      <el-input v-model="zhaoContractInfo.contractName" placeholder="2002201533"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="生效时间" prop="date1">
                      <el-date-picker type="date" placeholder="选择日期" v-model="zhaoContractInfo.effectTime" style="width: 217px;"></el-date-picker>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="失效时间" prop="date1">
                      <el-date-picker type="date" placeholder="选择日期"  v-model="zhaoContractInfo.failureTime" style="width: 217px;"></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="签约人" prop="contractor">
                      <el-input  v-model="zhaoContractInfo.customerName" placeholder="王志杰"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="所有者" prop="ownernaem">
                      <el-input v-model="zhaoContractInfo.empName" placeholder="陈默"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="签约时间" prop="data1">
                      <el-date-picker v-model="zhaoContractInfo.signingTime" type="date" placeholder="选择日期"  style="width: 217px;"></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="总金额" prop="total">
                      <el-input v-model="zhaoContractInfo.totalAmount " type="number" placeholder="12000,000"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="审批进度" prop="receivable_total">
                      <el-input v-model="cuckSate"  placeholder="5000,000"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="付款方式" prop="payment">
                      <el-select v-model="zhaoContractInfo.termsName" placeholder="付款方式" style="width:217px">
                        <el-option label="支票" value="shanghai"></el-option>
                        <el-option label="现金" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="状态" prop="resource">
                  <el-radio-group v-model="zhaoContractInfo.contractState">
                    <el-radio :label="1" >执行中</el-radio>
                    <el-radio :label="0">结束</el-radio>
                    <el-radio :label="2">意外终止</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="备注 " prop="desc">
                  <el-input type="textarea" v-model="zhaoContractInfo.noteInfo"></el-input>
                </el-form-item>
              </el-form>
            </div>

            <!--计划交付弹框-->
            <div class="addForm_sty">
              <el-dialog title="交付计划"   :visible.sync="addformVisable" :close-on-click-modal="false">
                <div class="delivery_sty"></div>
                <el-form :model="addForm" label-width="80px">
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="产品名称:" prop="productName">
                        <el-input v-model="addForm.productName" style="width: 100%"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="客户:" prop="customer">
                        <el-input v-model="addForm.customer" style="width: 100%"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="合同:" prop="contract">
                        <el-input v-model="addForm.contract" style="width: 100%"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="单价:" prop="price">
                        <el-input v-model="addForm.price" style="width: 100%"></el-input>
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="订单数量:" prop="productNumber">
                        <el-input v-model="addForm.productNumber" style="width: 100%"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="计划时间:" prop="deliveryTime">
                        <el-date-picker v-model="addForm.deliveryTime" style="width: 95%"></el-date-picker>
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="期次:" prop="PeriodNumber">
                        <el-select v-model="addForm.PeriodNumber" style="width:100%">
                          <el-option label="1" value="1"></el-option>
                          <el-option label="2" value="2"></el-option>
                          <el-option label="3" value="3"></el-option>
                          <el-option label="4" value="5"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="所有者:" prop="salesmanNmae">
                        <el-input v-model="addForm.salesmanNmae" style="width: 100%"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="要求:" prop="requirements">
                        <el-input  type="textarea" v-model="addForm.requirements" style="width: 100%"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="交付条件:" prop="conditions">
                        <el-input  type="conditions" v-model="addForm.conditions" style="width: 100%"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="是否提醒" prop="remind">
                        <el-radio-group v-model="addForm.remind">
                          <el-radio label="提醒" value="0"></el-radio>
                          <el-radio label="不提醒" value="1"></el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="备注"prop="noteInfo">
                        <el-input type="textarea" v-model="addForm.noteInfo"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>

                <div slot="footer" class="dialog-footer">
                  <el-button @click="addformVisable = false">取消</el-button>
                  <el-button type="primary">提交</el-button>
                </div>
              </el-dialog>
            </div>
          </el-scrollbar>
        </div>
      </el-col>

      <el-col :span="4">
        <div  class="right_sty">
          <el-row>
            <el-col :span="24">
              <div style="width:100%;height: 37px;border: 2px solid #20a0ff;border-top: none;border-right: none;border-left: none;">
                <el-row class="header_sty">
                  <el-col :span="24">
                    <span><i class="el-icon-s-order">:</i></span> <span>订单集群  [{{orderInfoLength}}]</span>
                  </el-col>
                </el-row>
              </div>

            </el-col>
          </el-row>
          <div style="border:1px solid #ffffff; min-height: 10px; max-height: 200px; width: 95%;">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="审批记录" name="2" style=" min-height: 10px; max-height: 200px;overflow-y: auto;width: 95%;">
                <el-timeline :reverse="reverse">
                  <el-timeline-item
                    v-for="(activity, index) in activities" :key="index" >
                    {{activity.apprsDate | formatDate1}} {{activity.empByEmployeesId.empName}} {{activity.cucheckTypeByCutId.cutName}}
                  </el-timeline-item>
                </el-timeline>
              </el-collapse-item>
            </el-collapse>
          </div>
          <div class="second_sty">
            <el-row>
              <el-col :span="22" :offset="1" v-for="(cons, index) in orderInfo" style="margin-top: 10px;margin-bottom: 10px;cursor: pointer" :key="index">
                <el-card  shadow="hover" :body-style="{ padding: '4px'}" :class="{'active' : index === rightIndex}" >
                  <div>
                    <div style="padding: 14px;"   @click="cardevent(cons,index)">
                      <el-row>
                        <el-col>
                          <span style="color: #20a0ff">{{cons.orderName}}</span>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="24"><span>{{cons.orderTime |formatDate }} </span></el-col>
                      </el-row>
                      <el-row>
                      </el-row>
                      <div style="border: 1px solid #42b983 ;width: 95%;margin-top: 10px;margin-bottom: 5px"></div>
                      <el-row>
                        <el-col :span="24"><span>{{cons.outboundType}}</span></el-col>
                      </el-row>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {amountToStr,formatTimeToStr} from '../assets/format'
  import TemplateVue from './homepage/TemplateVue'

  export default {
    name: 'SaDemoPage_2',
    components: {TemplateVue},
    data(){
      return{
        reverse: true,
        activities: [],//合同审批记录
        activeNames: [1],
        rightIndex:0,
        //合同界面传参值
        contractid:'',
        //详情数据
        contractList:{},
        zhaoContractInfo:{
          contractState:'',
          signingTime:'',
          contractTheme:'',
          businessName:'',
          contractName:'',
          effectTime:'',
          failureTime:'',
          totalAmount:'',
          customerName:'',
          empName:'',
          termsName:'',
          cusName:'',
          noteInfo:''
        },
        addformVisable: false,//隐藏窗体
        //计划交付信息
        addForm:{
          productName:'',//产品名称
          customer:'',//客户信息
          contract:'',//合同信息
          price:'',//价格
          productNumber:'',//产品数量
          deliveryTime:'',//计划交付时间
          PeriodNumber:'',//期次
          salesmanNmae:'',//所有者
          requirements:'',//要求
          conditions:'',//交付条件
          remind:'',//是否提醒
          noteInfo:'',//备注
        },
        form2: {
          //表单对象
          name: "",//主题
          amount: "",//对应客户
          region: "",//对应机会
          contract:"",//合同编号
          date1: "",//合同生效时间
          date2: "",//合同失效时间
          contractor:"",//签约人
          ownernaem:"",//所有者
          date3:"",//签约时间,
          total:"",//总金额，
          receivable_total:"",//回款金额
          payment:"",//付款方式
          resource: "",//状态
          desc: ""//备注
        },
        orderInfo:[],//信息栏
        orderInfoLength:0,
        cuckSate:'',//审批状态
        userInfo:{
          employeesId:0,//员工id
          empName:''//员工名称
        },
        //合同复印件
        fileList2: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
    created:function(){
      this.userInfo=JSON.parse(sessionStorage.getItem('user'));
      this.contractid=this.$route.query.key;
      this.contractOrderInfo(this.contractid);
      this.initData(this.contractid,this.userInfo.employeesId);
      this.cucheckInfo(this.$route.query.key);
    },
    methods: {
      //审批记录
      cucheckInfo(contrId){
        let apprTitle='合同审批';
        this.$axios.get("http://localhost:8088/che/deliver-id",{params:{apprTitle:apprTitle,
            apprIds:contrId}}).then(v=>{
          this.activities= v.data;
          this.cuckSate=this.activities[this.activities.length-1].cucheckTypeByCutId.cutName;
        }).catch()
      },
      handleChange (val) {
        console.log(val);
      },
      cardevent(cons,index){
        this.rightIndex = index;
        this.$router.push({path:'demopage', query: {key:cons.orderId}})
        },
      //信息栏
      contractOrderInfo(contrId){
        this.$axios.get("http://localhost:8088/contract_orderInfo",{params:{orderId:contrId}}).then(v=>{
          this.orderInfo=v.data;
          this.orderInfoLength=this.orderInfo.length;
          }
        ).catch()
      },
      //初始化
      initData(id,userId){
        this.print("信息值id"+id);
        this.$axios.get("http://localhost:8088/contract_Details",
          {params:{contractid:id}}).then(v=>{
          //this.contractList=v.data;
          this.print("信息值"+v.data);
          this.zhaoContractInfo.contractState = v.data.contractState;
          this.zhaoContractInfo.signingTime = v.data.signingTime;
          this.zhaoContractInfo.cuName = v.data.customerByCustomId.cusName;
          this.zhaoContractInfo.contractName = v.data.contractName;
          this.zhaoContractInfo.contractTheme = v.data.contractTheme;
          this.zhaoContractInfo.termsName = v.data.termsPayment.termsName;
          this.zhaoContractInfo.businessName = v.data.businessInfoByBusinesId.businessName;
          this.zhaoContractInfo.effectTime = v.data.effectTime;
          this.zhaoContractInfo.failureTime = v.data.failureTime;
          this.zhaoContractInfo.totalAmount = v.data.totalAmount;
          this.zhaoContractInfo.customerName = v.data.customerName;
          this.zhaoContractInfo.empName = v.data.empId8.empName;
          this.zhaoContractInfo.cusName = v.data.customerByCustomId.cusName;
          this.zhaoContractInfo.noteInfo = v.data.noteInfo;
        }).catch()
      },
      //新增交付计划唐弹框显示
      add: function() {
        this.addformVisable =true;
      }
      },
    mounted() {

    },
    watch:{
      $route(){//跳转到该页面后需要进行的操作
        this.contractid=this.$route.query.key;
        this.initData(this.contractid);
      }
    },
    filters: {// 日期格式化
      formatDate: function (time) {
        if (time != null && time != '') {
          var date = new Date(time)
          return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
        } else {
          return ''
        }
      },
      formatDate1: function (time) {
        if (time != null && time != '') {
          var date = new Date(time)
          return formatTimeToStr(date, 'yyyy-MM-dd')
        } else {
          return ''
        }
      },
      amountEvent:function(val){
        return amountToStr(val);
      },
      ellipsis (value) {
        if (!value) return ''
        if (value.length > 8) {
          return value.slice(0,8) + '...'
        }
        return value
      }
    },
  }
</script>

<style scoped>
  .active{
    border: 2px solid #20a0ff;

  }
  .second_sty{
    border: 1px solid #ffffff ;
    min-height: 414px;
    max-height: 414px;
    overflow-y: auto;
  }
  .header_sty{
    padding: 10px 10px 3px 10px
  }
  .right_sty{
    border:1px solid #ffffff ;
    border-radius: 4px;
    width:100%;
    border:1px solid #BFBFBF;
    background-color: white;
    box-shadow:#ccc 0px 0px 10px;
    max-height: 530px;
    min-height: 530px;
    margin:  0 0 0 6px;
    overflow-y: auto;
  }
  .dialog-footer{
    margin: 0 auto;
    padding: 1px 1px 1px 1px ;
  }
  .addForm_sty>>>.el-form-item{
    margin: 1px 1px 1px ;
    padding: 9px 1px 1px 1px;
  }
  .div_sty{
    background-color: #E9EEF3;
    border-radius: 2px;
  }
  .el-button--primary{
    margin: 0 0 0 445px;
  }
  .main_sty{
    border: 1px solid #ffffff;
    width: 100%;
  }
  .demo_sty{
    border:1px solid #ffffff;
    width:100%;
    height: 530px;
    background: white;
    border-radius: 5px;
    box-shadow:#ccc 0px 0px 10px;
    overflow:hidden;
  }
  .return{
    border-right:1px solid #ccc;
    width:70px;
    color:#777;
    font-size: 13px;
    margin-left:10px;
    margin-top:10px;
    cursor: pointer;

  }
  .return:hover{
    color:#409eff;
    font-max-size: 10px;
  }
  .form_sty{
    border:1px solid #FFFFFF;
    background-color: #FFFFFF;
  }
  .demo_sty>>>.el-form-item{
    margin: 10px 1px 1px ;
    padding: 10px 1px 1px 1px;
  }

  .demo_sty>>>.el-form-item__label{
    text-align: left;
    padding: 0 0 0 19px;
  }

  .demo_sty>>>.el-input__inner{
    border-top:none;
    border-left: none;
    border-right: none;
  }
  .el-form-item{
    padding: 20px 100px 0 10px;
  }
  .el-input{
    width: 50%;
    float: left;
    width: 217px;
  }
  .separator_sty{
    border:1px solid #409eff;
    width: 95%;
    margin: 10px auto;
  }
  .delivery_sty{
    border:1px solid #409eff;
    width: 95%;
    margin: 10px auto;
  }
  .contracts_sty{
    border: 1px solid #aaaaaa;
    width: 49%;
    height: 100px;
    float: left;
    margin:10px 0 0 0 ;
    border-radius: 5px;
    box-shadow:0 0 1px #000 inset;
  }


  ::-webkit-scrollbar {

    width: 6px; /*对垂直流动条有效*/

    height: 6px; /*对水平流动条有效*/

  }

  /*定义滚动条的轨道颜色、内阴影及圆角*/

  ::-webkit-scrollbar-track{

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.2);

    background:linear-gradient(to top, #fcf5ee, #faf7e6,#73d2f3,#eeeeee);

    border-radius: 1px;

    display:none;

  }
</style>
